<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<style>
  .router-link-active{
    background-color: red;
  }
</style>
</head>
<body>

  <div id='app'>
    <router-view name="a" ></router-view>
    <router-view name="b" ></router-view>
    <router-view name="c" ></router-view>
  </div>

<script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js'></script>
<script src="./vue-router.js"></script>
<script>
  const Home1 = {
    template: `
      <div>
        home1页
      </div>
    `
  }
  const Home2 = {
    template: `
      <div>
        home2页
      </div>
    `
  }
  const Home3 = {
    template: `
      <div>
        home3页
      </div>
    `
  }
  // 定义路由
  const routes = [   // 配置路由规则
    {
      path: '/home',
      name: 'home',
      components: {
        a: Home1,
        b: Home2,
        c: Home3  
      }
    },
  ]
  const router = new VueRouter({  // 注册路由
    routes
  })
  const app = new Vue({
    el: '#app'
    ,router   // 挂载实例
  })

</script>
</body>
</html>